const validAll = {};

function debounce(fn, delay) {
    let timer
    return function() {
        var context = this
        var args = arguments
        clearTimeout(timer)
        timer = setTimeout(function() {
            fn.apply(context, args)
        }, delay)
    }
}

function isEmail(value) {
    let patten = /\w+(\.\w+){0,}@\w+(\.\w+){0,}(\.\w+)$/
    if (!value) {
        return { status: false, msg: "请输入邮箱" };
    }
    if (patten.test(value)) {
        return { status: true };
    } else {
        return { status: false, msg: "邮箱格式有误" };
    }
}

function isVerifyCode(value) {
    if (value !== "pdnioc") {
        return { status: false, msg: "验证码有误" };
    } else {
        return { status: true };
    }
}

function isEmailCode(value) {
    if (value !== "pdnioc") {
        return { status: false, msg: "验证码有误" };
    } else {
        return { status: true };
    }
}

function isUserName(value) {
    if (value !== "pdnioc") {
        return { status: false, msg: "用户被占用" };
    } else {
        return { status: true };
    }
}

function isDomain(value) {
    if (value !== "pdnioc") {
        return { status: false, msg: "域名被占用" };
    } else {
        return { status: true };
    }
}

function isPassword(value) {
    if (value.length < 6) {
        return { status: false, msg: "密码不能少于6位" };
    } else {
        return { status: true };
    }
}

function isCheck() {
    let check = document.querySelector("#check");
    if (check.checked) {
        return { status: true };
    } else {
        return { status: false, msg: "请勾选用户协议" };
    }
}

function rmNotice(parent) {
    if (parent.querySelector(".delete")) {
        parent.removeChild(parent.querySelector(".delete"));
    }
    if (parent.querySelector(".err")) {
        parent.removeChild(parent.querySelector(".err"));
    }
    if (parent.querySelector(".ok")) {
        parent.removeChild(parent.querySelector(".ok"));
    }
}

function changeInput(status, ele) {
    let err = ele.className.slice(-9, );
    if (status) {
        if (err === "err-input") {
            ele.className = ele.className.slice(0, -10);
        }
    } else {
        if (err !== "err-input") {
            ele.className += " err-input";
        }
    }

}

function showNotice(msg, ele) {
    const status = msg.status;
    const icon = document.createElement("div");
    const input = ele.querySelector("input")
    changeInput(status, input);
    validItem(input.name, status);
    if (status) {
        icon.className = "ok";
        ele.append(icon);
    } else {
        const errMsg = document.createElement("div");
        errMsg.className = "err";
        errMsg.innerText = msg.msg;
        icon.className = "delete";
        ele.append(icon);
        ele.append(errMsg);
    }
}

function validItem(name, status) {

    if (status) {
        validAll[name] = true;
    } else {
        validAll[name] = false;
    }
}

function noticeControl(dom) {
    let parent = dom;
    let ele = dom.querySelector("input");
    rmNotice(parent);
    let name = ele.name;
    let value = ele.value;
    let msg = "";
    if (name === "email") {
        msg = isEmail(value);
        showNotice(msg, parent);
    }
    if (name === "verify-code") {
        msg = isVerifyCode(value);
        showNotice(msg, parent);
    }
    if (name === "email-code") {
        msg = isEmailCode(value);
        showNotice(msg, parent);
    }
    if (name === "user-name") {
        msg = isUserName(value);
        showNotice(msg, parent);
    }
    if (name === "domain") {
        msg = isDomain(value);
        showNotice(msg, parent);
    }
    if (name === "password") {
        msg = isPassword(value);
        showNotice(msg, parent);
    }
    if (name === "register") {
        msg = isCheck()
        showNotice(msg, parent);
    }
}

function sleep(duration) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

async function changeInner(ele, i) {
    ele.innerText = i + " s";
    await sleep(1000);
}
async function main() {
    let i = 300;
    while (i > 0) {
        await changeInner(email, i);
        i--;
    }
    email.innerText = "获取验证码";
}

const form = document.getElementById("form");
const formGroup = form.querySelectorAll(".form-control");
formGroup.forEach(control => {
    let input = control.querySelector("input");
    if (input && input.name !== "submit") {
        input.addEventListener("blur", debounce(function(e) {
            noticeControl(control);
        }, 1000))
    }
})

const email = document.getElementById("sendmail");
let isClick = true;
email.addEventListener("click", function() {
    if (isClick) {
        isClick = false;
        main();
        setTimeout(function() {
            isClick = true;
        }, 300 * 1000)
    }
});

form.addEventListener("submit", function(e) {
    let isValidAll = true;
    formGroup.forEach(control => {
        let input = control.querySelector("input");
        if (input && input.name !== "submit") {
            isValidAll = isValidAll && validAll[input.name];
        }
    })

    if (!isValidAll) {
        formGroup.forEach(control => {
            let input = control.querySelector("input");
            // console.log(input);
            if (input && input.name !== "submit") {
                console.log(input);
                noticeControl(control);
            }
        });
        e.preventDefault();
        e.stopPropagation();
    }
})
const helpIcon = document.querySelector("#help-icon");
const help = document.querySelector("#help");
helpIcon.addEventListener("mouseover", function() {
    help.style.zIndex = 1;
});
helpIcon.addEventListener("mouseout", function() {
    help.style.zIndex = -1;
});
const eye = document.querySelector("#eye")
eye.addEventListener("click", function() {
    const parent = this.parentElement;
    const input = parent.querySelector("input");
    if (this.className === "eye") {
        this.className = "hide";
        input.type = "password";
    } else {
        this.className = "eye";
        input.type = "text";
    }
})
let topIcon = document.querySelector(".top-icon");
window.addEventListener('scroll', debounce(function(e) {
    if (window.scrollY > 300) {
        topIcon.style.visibility = "visible";
    } else {
        topIcon.style.visibility = "hidden";
    }
}, 100));

topIcon.addEventListener("click", function() {
    document.documentElement.scrollTop = 0;
})